<template>
	<view class="main">
		<u-navbar :is-back="true" title="意见反馈" :background="background" back-icon-color="#000000" title-color="#33312D"
			title-bold="true"></u-navbar>
		<view class="type">
			<view class="title">
				反馈类型
			</view>
			<view class="father">
				<view :class="index==typeid?'childed':'child'" v-for="(item,index) in typelist" :key="index"
					@click="checked(index,item.name)">
					{{item.name}}
				</view>
			</view>
			<view class="title tit2">
				反馈内容
			</view>
			<view class="content">
				<textarea maxlength="-1" placeholder="我要吐槽..."  v-model="content"/>
			</view>
			<view class="title tit2">
				添加图片
			</view>
			<view class="photo" v-if="upurl==''" @click="upimg">
				<u-icon name="plus" size="40" color="#D3D3D3"></u-icon>
			</view>
			<view class="imgs"  v-else>
				<image v-for="(item,index) in upurl" :key="index" :src="item" mode=""></image>
				<view class="photo" v-if="upurl.length<3" @click="upimg">
					<u-icon name="plus" size="40" color="#D3D3D3"></u-icon>
				</view>
			</view>
		</view>
		<view class="button" @click="sub">
			提交
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				typelist: [],
				typeid: 0,
				typename:'',
				upurl:[],
				content:'',
			}
		},
		onLoad() {
			this.feedbacktype()
		},
		mounted() {

		},
		onShow() {},
		methods: {
			checked(index,name) {
				this.typeid = index
				this.typename = name
				
			},
			//反馈类型列表
			feedbacktype() {
				global.$http.request({
					url: '/shopapi/user/feedbacktypeList',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.typelist = res.data.data
						this.typename=this.typelist[0].name
					}
				})
			},
			//提交按钮
			sub() {
				if(this.typename==''||this.content==''){
					uni.showToast({
						title: '请将信息填写完整',
						icon: "none",
						mask: true,
						duration: 1000
					})
				}else{
					global.$http.request({
						url: '/shopapi/user/feedbacAdd',
						data: {
							token: uni.getStorageSync('token'),
							type:this.typename,
							img:this.upurl,
							content:this.content,
						}
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								mask: true,
								duration: 1000
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					})
				}
			},
			
			//上传反馈图片
			
			upimg(){
				var that=this
				uni.chooseImage({
					count:3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0]);
						global.$http.upload('/api/home/picterUp', {
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'images', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {
								token: uni.getStorageSync('token'),
							}, // HTTP 请求中其他额外的 form data
						}).then(res => {
						console.log(res.data.data.image);
						that.upurl.push(res.data.data.image)
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		font-family: Source Han Sans CN;
		width: 750rpx;
		margin: 0 auto;
		background-color: #fff;

		.main {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			margin: 0 auto;

			.type {
				width: 750rpx;
				padding: 25rpx 29rpx;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

				.tit2 {
					padding: 51rpx 0 11rpx 0;
				}

				.father {
					display: flex;

					// justify-content: space-between;
					.child {
						width: 156rpx;
						background: #FFFFFF;
						border: 1rpx solid #D3D3D3;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						padding: 15rpx 22rpx;
						margin: 19rpx 20rpx 0 0;
					}

					.childed {
						width: 156rpx;
						background: #ffd057;
						border: 1rpx solid #D3D3D3;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						padding: 15rpx 22rpx;
						margin: 19rpx 20rpx 0 0;
					}
				}

				.content {
					padding: 28rpx 21rpx;
					width: 694rpx;
					margin: 0 auto;
					height: 340rpx;
					background: #FFFFFF;
					border: 1rpx solid #D3D3D3;

				}

				.photo {
					width: 190rpx;
					height: 190rpx;
					text-align: center;
					line-height: 190rpx;
					background: #FFFFFF;
					border: 1rpx solid #D3D3D3;
				}
				.imgs{
					display: flex;
					align-items: center;
					image{
						margin-right: 30rpx;
						width: 190rpx;
						height: 190rpx;
					}
				}
				
			}

			.button {
				width: 680rpx;
				margin: 54rpx auto;
				text-align: center;
				padding: 24rpx 0;
				background: #E22222;
				border-radius: 40rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
